<template>
  <a-layout-content style="padding: 0 50px">
    <a-breadcrumb style="margin: 16px 0">
      <a-breadcrumb-item>Home</a-breadcrumb-item>
      <a-breadcrumb-item>List</a-breadcrumb-item>
      <a-breadcrumb-item>App</a-breadcrumb-item>
    </a-breadcrumb>
    <a-layout style="padding: 24px 0; background: #fff">
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
            @click="handleClick"
            mode="inline"
            style="height: 100%"
        >
          <a-menu-item key="welcome" >欢迎</a-menu-item>
          <a-sub-menu v-for="item in level" :key="item.id">
            <template #title>
                <span>
                  {{item.name}}
                </span>
            </template>
            <a-menu-item v-for="c in item.children" :key="c.id">
              {{c.name}}
            </a-menu-item>
          </a-sub-menu>

        </a-menu>
      </a-layout-sider>
      <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">

        <div v-show="showWelcome">
          <Welcome></Welcome>
        </div>

        <a-list v-show="!showWelcome" item-layout="vertical" size="large" :grid="{ gutter: 61, column:3}" :data-source="ebook">
          <template #renderItem="{ item }">
            <a-list-item key="item.name">
              <template #actions>
                <span>
                  <component :is="'LikeOutlined'" />
                    {{ item.voteCount }} &nbsp;
                  <component :is="'FileOutlined'" />
                    {{ item.docCount }}&nbsp;
                  <component :is="'UserOutlined'" />
                    {{ item.viewCount }}
                </span>
              </template>

              <a-list-item-meta :description="item.description">
                <template #title>
                  <router-link :to="'/doc/?ebookId='+item.id">{{item.name}}</router-link>
                </template>
                <template #avatar><a-avatar :src="item.cover" /></template>
              </a-list-item-meta>
              {{ item.content }}
            </a-list-item>
          </template>
        </a-list>
      </a-layout-content>
    </a-layout>
  </a-layout-content>
</template>

<script>
// @ is an alias to /src
import axios from "axios"
import { UserOutlined, LaptopOutlined, NotificationOutlined, StarOutlined, LikeOutlined, MessageOutlined, FileOutlined } from '@ant-design/icons-vue';
import { ref, onMounted} from "vue";
import {arrayToTree} from "@/util/Tool";
import {message} from "ant-design-vue";
import Welcome from "@/components/Welcome";
export default {
  name: 'HomeView',
  components: {
    Welcome,
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined,
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
    FileOutlined,
  },
  setup(){
    const ebook = ref()
    const showWelcome = ref(true)
    let category = []
    const level = ref()
    const loadCategory = ()=>{
      axios.get("api/getAllCategory").then(res=>{
        if (res.data.code === "200"){
          category = res.data.date

          level.value = arrayToTree(category, 0)

        } else {
          message.error(res.data.msg);
        }
      })
    }

    const category2Id = ref()

    const loadEbook = ()=>{
      axios.get("api/getAllEbook",{
        params:{
          pageNum: 1,
          pageSize: 100,
          category2Id: category2Id.value
        }
      }).then(res=>{
        console.log(res)
        ebook.value = res.data.date.list
      })
    }

    const handleClick = (value)=>{
      showWelcome.value = false
      category2Id.value = value.key
      loadEbook()
    }

    onMounted(()=>{
      loadCategory()
      loadEbook()
    })
    const actions = [
      { type: 'StarOutlined', text: '156' },
      { type: 'LikeOutlined', text: '156' },
      { type: 'MessageOutlined', text: '2' },
    ];
    return {
      ebook,
      actions,
      level,
      showWelcome,
      handleClick,
    }
  }
}

</script>

<style scoped>
.ant-avatar{
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 10px;
}
</style>
